import {Component} from 'react'
import React, { useState } from 'react';
import { Modal, Button,Form, Input, InputNumber,message} from 'antd';
import axios from "axios";
import api from '../api'
import '../pages/set.css'
const layout = {
    labelCol: { span: 8},
    wrapperCol: { span: 5 },
};

class SafetySet extends Component{
    state={
        isModalVisible:false,//是否显示模态框
        adminName:'shop01',//登录的用户
        isStrong:'强',//密码强度
        oldPwd:'',//原密码
        newPwd:'',//新密码
        confirmPwd:'',//确认新密码
    }
    showModal = () => {
        this.setState({
            isModalVisible:true
        })

    };
    handleOk = (e) => {
        console.log(e)
        this.setState({
            isModalVisible:false,
        })
    };
    handleCancel = () => {
        this.setState({
            isModalVisible:false,
            oldPwd:'',//原密码
            newPwd:'',//新密码
            confirmPwd:'',//确认新密码
        })
        console.log(this.formRef.current)
        this.formRef.current.setFieldsValue({
            oldPwd:'',//原密码
            newPwd:'',//新密码
            confirmPwd:'',//确认新密码
        })
    };
    onFinish = (values) => {
        console.log(values);
        if(values.newPwd != values.confirmPwd){
            return message.error('新密码和确认密码不一致');
        }
        let fromDate = new FormData()
        fromDate.append("adminName",this.state.adminName);
        fromDate.append("adminPwd",values.oldPwd);
        fromDate.append("newPwd",values.newPwd);
        axios.post(api.basicSet.safeSet,
            fromDate,{
            header: {'Content-Type':'multipart/form-data'}
        }).then(res=>{
            console.log(res)
            if (res.data.code==6004){
               return message.error('原密码不正确');
            }
            if(res.data.code==200){
                if (values.newPwd.length>=5 && values.newPwd.length<8){
                   this.setState({
                       isStrong:'弱'
                   })
                }else if(this.newpwd.length>=8 && this.newpwd.length<10){
                    this.setState({
                        isStrong:'较强'
                    })
                }else if (this.newpwd.length>=10 && this.newpwd.length<=16){
                    this.setState({
                        isStrong:'强'
                    })
                }
                message.success ('密码修改成功')
            }
        })
    };
    componentDidMount() {
        // const newarr=JSON.parse(sessionStorage.getItem('userlist'))
        // const usernames=newarr[0]
        // this.adminName=usernames
    }
    formRef = React.createRef();
    render() {
        return(
            <div className='account'>
                <h2>安全设置</h2>
                <div className='safeSet'>
                    <h5 className='safepwd'>账号密码</h5>
                    <p className='currentPwd'>当前密码强度：<span>{this.state.isStrong}</span></p>
                    <div className='changePwd'><Button type="text" onClick={this.showModal}>修改</Button></div>
                </div>
                <div>
                    <Modal title="修改密码" visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} footer={null} className='safeMotal'>
                        <Form {...layout} name="nest-messages" onFinish={this.onFinish} ref={this.formRef}>
                            <Form.Item label="原密码" name="oldPwd" rules={[{ required: true, message: '请输入原密码！' }]}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label="新密码" name="newPwd" rules={[{ required: true, message: '请输入新密码！' }]}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label="确认新密码" name="confirmPwd" rules={[{ required: true, message: '请再次输入新密码！' }]}>
                                <Input.Password />
                            </Form.Item>
                            <Form.Item className='safeFrmBut'>
                                <Button htmlType="button" onClick={this.handleCancel} className='butDetele'>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    修改
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </div>
        )
    }
}
export default SafetySet